<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>公告-爆爆社区</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <style>
        .timeline-small {
            margin: 30px auto 0;
            max-width: 90%;
            box-shadow: 0 0 10px #e7f6f7;
            border: 11px solid #fdfdfd;
            font-family: 'Open Sans', sans-serif;
        }

        .timeline-small-body ul {
            padding: 1em 0 0 2em;
            margin: 0;
            list-style: none;
            position: relative;
        }

        .timeline-small-body ul::before {
            content: ' ';
            height: 100%;
            width: 4px;
            background-color: #d9d9d9;
            position: absolute;
            top: 0;
            left: 2.4em;
            z-index: -1;
        }

        .timeline-small-body li div {
            display: inline-block;
            margin: 1em 0;
            vertical-align: top;
        }

        .timeline-small-body .bullet {
            width: 1rem;
            height: 1rem;
            box-sizing: border-box;
            border-radius: 50%;
            background: #fff;
            z-index: 1;
            margin: 1em 10px 1em 0;
        }

        .timeline-small-body .bullet.pink {
            background-color: hotpink;
            border: 3px solid #F93B69;
        }

        .timeline-small-body .bullet.green {
            background-color: lightseagreen;
            border: 3px solid #B0E8E2;
        }

        .timeline-small-body .bullet.blue {
            background-color: aquamarine;
            border: 3px solid cadetblue;
        }

        .timeline-small-body .bullet.orange {
            background-color: salmon;
            border: 3px solid #EB8B6E;
        }

        .timeline-small-body .date {
            font-size: 0.75em;
            padding-top: 0;
            padding-right: 20px;
        }

        .timeline-small-body .desc {
            width: 86%;
        }

        .timeline-small-body h3 {
            font-size: 0.9em;
            font-weight: 400;
            margin: 0;
        }

        .timeline-small-body h4 {
            margin: 10px 0 0 0;
            font-size: 0.7em;
            font-weight: 400;
            color: #808080;
        }
    </style>
</head>
<body>

<div th:replace="common/header::header(activeUrl='say')"></div>

<main role="main">

    <div class="container">

        <div th:if="${session.loginUser.getRoleId()==1}"
             class="col-md-12 blog-main" style="margin-top: 20px">
            <form th:action="@{'/say/'+${session.loginUser.getRoleId()}}" method="post">
                <div class="col-md-12 mb-3">
                    <label>标题</label>
                    <input type="text" name="title" class="form-control" value="" required>
                </div>
                <div class="col-md-12 mb-3">
                    <label>内容</label>
                    <div id="blog-content">
                        <textarea required name="content" rows="3" class="form-control"> </textarea>
                    </div>
                </div>
                <div class="col-md-12 mb-3">
                    <button type="submit" class="btn btn-primary btn-sm btn-block">发布闲记</button>
                </div>
            </form>
        </div>

        <!-- 主要内容部分 -->
        <div class="timeline-small">
            <div class="timeline-small-body">
                <ul>
                    <li th:each="say:${saylist}">
                        <div class="bullet green"></div>
                        <div class="desc">
                            <h3>
                                [[${say.getTitle()}]]
                                <small class="float-right"
                                       th:text="${#dates.format(say.getGmtCreate(),'yyyy-MM-dd')}"></small>
                            </h3>
                            <h4 th:utext="${say.getContent()}"></h4>
                        </div>
                    </li>
                </ul>
                <p class="text-center" style="color: #1F4661"> ...... </p>
            </div>
        </div>

    </div>
</main>

<div th:replace="common/footer::footer"></div>
<a class="to-top">返回顶部</a>
<th:block th:replace="common/footer::script"></th:block>

</body>
</html>